<template>
    <el-dialog v-if="dialogVisible" :close-on-click-modal='false' title="项目人员" :visible.sync="dialogVisible" @close="resetForm()" width="400px">
        <div class="flexbox flexcenter flexbetween">
            <div class="region_list flexbox flexcenter">
                <div class="region_item tab_style" :class='{active:editForm.group==1}' @click="selectGroup(1)">一组</div>
                <div class="region_item tab_style" :class='{active:editForm.group==2}' @click="selectGroup(2)">二组</div>
                <div class="region_item tab_style" :class='{active:editForm.group==3}' @click="selectGroup(3)">三组</div>
                <div class="region_item tab_style" :class='{active:editForm.group==4}' @click="selectGroup(4)">四组</div>
            </div>
            <el-button plain size="mini" class="plain_blue" icon="el-icon-plus" @click="addMember">
                编辑固定人员
            </el-button>
        </div>
        <ul class="member_list" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
            <li class="member_item flexbox flexcenter flexbetween" v-for="(item,index) in memberList" :key="index">
                <span class="member_name">{{item.nickname}}</span>
            </li>
            <!-- <template v-else>
                <li>
                    <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:250px">
                        <img src="../../assets/img/null_icon.svg" alt="">
                        <div class="font_13 color_03">暂无数据</div>
                    </div>
                </li>
            </template> -->
        </ul>
        <el-dialog width="400px" title="添加固定人员" :visible.sync="innerVisible" append-to-body>
            <div class="font_14 color_01">选择人员</div>
            <el-checkbox-group v-model="editForm.editor" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                <el-checkbox :label="item.id" v-for="item in centreList" :key="item.id">{{item.nickname}}</el-checkbox>
            </el-checkbox-group>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" class="el-button-width" @click="innerVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="editMember" :loading="loading" class="el-button-width">保 存</el-button>
            </span>
        </el-dialog>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" type="primary" @click="resetForm()" :loading="loading" class="el-button-width">关 闭</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            loading: false,
            innerVisible: false,
            editForm: {
                group: 1,
                editor: [],
            },
            memberList: [],
            centreList: [],
            dialogVisible: false,
        };
    },
    created() {
        
    },
    methods: {
        getData(){
            this.dialogVisible = true
            this.getMemberList();
        },
        // 选择组别
        selectGroup(val) {
            this.editForm.group = val;
            this.getMemberList()
        },

        // 添加固定人员
        addMember(){
            this.innerVisible = true
            this.editForm.editor = this.memberList.map(item=>{return item.id})
            this.getCentreList();
        },
        //获取人员列表
        async getMemberList() {
            this.loading = true
            const { data: res } = await this.$http.post(
                "adminapi/demandsz/editorGroupList",
                {
                    group: this.editForm.group,
                }
            );
            if (res.code !== 200) {
                this.loading = false
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false
                this.memberList = res.data
            }
        },

        // 获取核心创意人列表
        async getCentreList() {
            this.loading = true
            const { data: res } = await this.$http.post(
                "adminapi/company/szCentreList"
            );
            if (res.code !== 200) {
                this.loading = false
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false
                this.centreList = res.data;
            }
        },

        //编辑人员
        async editMember() {
            this.loading = true
            const { data: res } = await this.$http.post(
                "adminapi/demandsz/editorGroupEdit",
                this.editForm
            );
            if (res.code !== 200) {
                this.loading = false
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false
                this.innerVisible = false
                this.$message({
                    message: "保存成功",
                    type: "success",
                });
                this.getMemberList()
            }
        },

        // 关闭重置表单
        resetForm() {
            this.dialogVisible = false;
            this.editForm.group = 1;
        },
    },
    components: {},
};
</script>


<style scoped>
.region_list {
    justify-content: center;
}
.region_item {
    height: 40px;
    line-height: 40px;
    padding: 0 25px;
    font-size: 14px;
    color: #616c85;
    margin-left: -20px;
}
.region_item.active {
    color: #17233d;
}
.member_list{
    height: 200px;
    overflow-y: auto;
    margin-top: 12px;
}
.member_item {
    height: 48px;
}
.member_name {
    font-size: 14px;
    color: #17233d;
}
.member_tag {
    font-size: 12px;
    color: #4475ff;
    line-height: 18px;
    height: 18px;
    border: 1px solid #4475ff;
    padding: 0 5px;
    border-radius: 2px;
    margin-left: 5px;
}
.el-checkbox-group {
    height: 200px;
    overflow-y: auto;
    line-height: 48px;
    margin-top: 12px;
}
.el-checkbox {
    display: block;
    margin-right: 0;
}
</style>
